<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <meta charset="utf-8">
	<link rel="stylesheet" href="css/jquery-ui.css">
 </head>
 <body>
  <h1>jQueryUI：Widgets —— Dialog</h1>
	<h3>弹出式对话框</h3>
	<a id="btnLogin" href="#">我要登录</a>
  <h3 id="welcome">
    Hi,<span id="uname"></span> 
    | 
    <a id="btnLogout" href="#">注销</a>
  </h3>
<div id="dialog-login" title="用户登录">
  <form>
    用户名：<input id="txtName" name="uname"><br>
    密码名：<input id="txtPwd" type="password" name="upwd"><br>
    <div id="valiTips" style="background:lightYellow;color:red;display:none">
    </div>
  </form>
</div>
	<script src="js/jquery-3.2.1.js"></script>
	<script src="js/jquery-ui.js"></script>
	<script>
$(()=>{
var $btnLogin=$("#btnLogin"),
    $welcome=$("#welcome"),
    $dialogLogin=$("#dialog-login"),
    $form=$dialogLogin.children("form"),
    $txtName=$("#txtName"),
    $txtPwd=$("#txtPwd"),
    $valiTips=$("#valiTips");
$.ajax({
  url:"7_isLogin.php",
  type:"get",
}).then(data=>{
  if(data.ok){
    $btnLogin.hide();
    $("#uname").html(data.uname);
    $welcome.show();
  }else{
    $btnLogin.show();
    $welcome.hide();
  }
});
$("#btnLogout").click(()=>{
  $.ajax({url:"7_logout.php"})
    .then(()=>location.reload());
});
$dialogLogin.dialog({
  autoOpen:false,
  modal:true,
  show: { effect: "blind", duration: 500 },
  hide: { effect: "fade", duration: 500 },
  buttons:{
    "登录":()=>{
      if($txtName.val().trim()=="")
        $valiTips.html("用户名不能为空").show();
      else if($txtPwd.val().trim()=="")
        $valiTips.html("密码不能为空").show();
      else
        $.ajax({
          url:"7_login.php",
          type:"post",
          data:$form.serialize(),
        }).then(data=>{
          if(data.ok){
            $dialogLogin.dialog("close");
            $btnLogin.hide();
            $("#uname").html(data.msg);
            $welcome.show();
          }else{
            $valiTips.html(data.msg).show();
          }
        })
    },
    "取消":()=>$dialogLogin.dialog("close")
  },
  close:()=>$valiTips.empty().hide()
});
$btnLogin.click(()=>{
  $dialogLogin.dialog("open");
});
});
	</script>
 </body>
</html>
